
import { createApp } from 'vue'
import Alert from "./Alert.vue";
function ZkyAlert({ hidden = true, time = 1000, title, type }) {

    // 规范显示文本，当没有传递内容的时候，根据类型显示不同的内容
    let typeDetails = {
        success: "成功",
        error: "失败"
    }
    // 规范类型值，当类型不存在的时候将类型重置为success
    let Maintype = ""
    if (type) {
        Maintype = type
    } else {
        Maintype = "success"
    }
    // 实例化组件，createApp第二个参数是props
    const confirmInstance = createApp(Alert, {
        hidden: hidden || '提示',
        title: title || typeDetails[Maintype],
        type: type || "success"
    })
    // 通过计时器让自定义的元素消失
    setTimeout(() => {
        unmount()
        const dom = document.querySelectorAll(".Alert") // 获取当前页面中所有自定义添加上去的容器
        for (let index = 0; index < dom.length; index++) {
            dom[index].style.top = `${(index + 1) * 50}px`;
        }
    }, time);


    // 卸载组件
    const unmount = () => {
        confirmInstance.unmount()  // 卸载组件
        document.body.removeChild(parentNode) // 删除元素
    }
    // // 创建一个挂载容器
    const parentNode = document.createElement('div')
    parentNode.setAttribute("class", "Alert")  // 给该容器添加一个类名
    // 添加样式
    parentNode.style.position = "absolute";
    parentNode.style.width = "100%";
    parentNode.style.transition = "all 0.6s";
    parentNode.style.top = "50px";
    parentNode.style.zIndex = "999";
    document.body.appendChild(parentNode)
    const dom = document.querySelectorAll(".Alert") // 获取当前页面中所有自定义添加上去的容器
    for (let index = 0; index < dom.length; index++) {
        dom[index].style.top = `${(index + 1) * 50}px`;
    }
    // // 挂载组件
    confirmInstance.mount(parentNode)


    // 组件的调用方式
    // Alert({
    //     time: 1000, // 每个组件小时时间 默认值1s
    //     title: ""   // 渲染的内容，
    // type: "success" || "error" //组件类型
    // })
}

export default ZkyAlert



